<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>创建新待办 - 嘀嗒</title>
    
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    <script>
        tailwind.config = {
            // darkMode: 'class', // Disable dark mode by default
            theme: {
                extend: {
                    colors: {
                        'primary': '#10B981',
                        'primary-focus': '#059669',
                        'base-100-light': '#FFFFFF',
                        'base-content-light': '#1F2937',
                        'neutral-light': '#F3F4F6', // page background
                        'input-bg-light': '#FFFFFF',
                        'input-border-light': '#D1D5DB', // gray-300
                        'text-muted-light': '#6B7280', // gray-500
                        'priority-high': '#EF4444', // red-500
                        'priority-medium': '#F59E0B', // amber-500
                        'priority-low': '#3B82F6', // blue-500
                        'priority-high-bg-light': '#FEE2E2', // red-100
                        'priority-medium-bg-light': '#FEF3C7', // amber-100
                        'priority-low-bg-light': '#DBEAFE', // blue-100
                    }
                }
            }
        }
    </script>
    <style>
        body {
            background-color: #F3F4F6; /* neutral-light */
            color: #1F2937; /* base-content-light */
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
            display: flex;
            flex-direction: column;
            height: 100vh;
        }
        .priority-selector .priority-option {
            border: 2px solid transparent;
            transition: all 0.2s ease-in-out;
        }
        .priority-selector .priority-option:hover {
            opacity: 0.8;
        }
        .priority-selector .priority-option.selected {
            border-color: #10B981; /* primary */
            /* background-color: #10B98133; // Replaced by specific light theme bg */
            box-shadow: 0 0 0 2px #10B981;
        }
        input[type="date"]::-webkit-calendar-picker-indicator {
            /* filter: invert(0.8); // Removed for light theme */
        }
    </style>
</head>
<body class="antialiased flex flex-col bg-neutral-light text-base-content-light">

    <header class="p-4 sticky top-0 bg-base-100-light z-10 shadow-sm flex items-center justify-between border-b border-input-border-light">
        <button onclick="document.location.href='home_todos.html'" class="text-text-muted-light hover:text-primary">
            <i class="fas fa-times text-xl"></i>
        </button>
        <h1 class="text-xl font-semibold text-base-content-light">创建新待办</h1>
        <button onclick="document.location.href='home_todos.html'" class="text-primary hover:text-primary-focus font-semibold">
            保存
        </button>
    </header>

    <main class="flex-grow p-4 overflow-y-auto space-y-6">
        <!-- Todo Content -->
        <section>
            <label for="todo-content" class="block text-sm font-medium text-text-muted-light mb-1">待办事项</label>
            <textarea id="todo-content" placeholder="例如：下午3点开会讨论新功能" rows="3" class="w-full bg-input-bg-light border border-input-border-light text-base-content-light rounded-lg p-3 focus:ring-primary focus:border-primary shadow-sm"></textarea>
        </section>

        <!-- Due Date -->
        <section>
            <label for="due-date" class="block text-sm font-medium text-text-muted-light mb-1">截止日期</label>
            <input type="date" id="due-date" class="w-full bg-input-bg-light border border-input-border-light text-base-content-light rounded-lg p-3 focus:ring-primary focus:border-primary shadow-sm">
        </section>

        <!-- Priority -->
        <section>
            <label class="block text-sm font-medium text-text-muted-light mb-1">优先级</label>
            <div class="priority-selector grid grid-cols-3 gap-3">
                <button class="priority-option selected p-3 rounded-lg bg-priority-high-bg-light text-priority-high border-priority-high font-medium">
                    <i class="fas fa-flag mr-1"></i> 高
                </button>
                <button class="priority-option p-3 rounded-lg bg-priority-medium-bg-light text-priority-medium border-priority-medium font-medium">
                    <i class="fas fa-flag mr-1"></i> 中
                </button>
                <button class="priority-option p-3 rounded-lg bg-priority-low-bg-light text-priority-low border-priority-low font-medium">
                    <i class="fas fa-flag mr-1"></i> 低
                </button>
            </div>
        </section>

        <!-- List / Category -->
        <section>
            <label for="todo-list" class="block text-sm font-medium text-text-muted-light mb-1">所属清单</label>
            <select id="todo-list" class="w-full bg-input-bg-light border border-input-border-light text-base-content-light rounded-lg p-3 focus:ring-primary focus:border-primary shadow-sm">
                <option>默认清单</option>
                <option>工作</option>
                <option>学习</option>
                <option>个人</option>
                <option>购物</option>
            </select>
        </section>

        <!-- Notes (Optional) -->
        <section>
            <label for="todo-notes" class="block text-sm font-medium text-text-muted-light mb-1">备注 (可选)</label>
            <textarea id="todo-notes" placeholder="补充说明或相关链接..." rows="2" class="w-full bg-input-bg-light border border-input-border-light text-base-content-light rounded-lg p-3 focus:ring-primary focus:border-primary shadow-sm"></textarea>
        </section>
        
        <!-- Image from Pexels: https://www.pexels.com/photo/person-writing-on-notebook-4145354/ -->
        <img src="https://images.pexels.com/photos/4145354/pexels-photo-4145354.jpeg?auto=compress&cs=tinysrgb&w=600" alt="Writing on notebook" class="w-full h-32 object-cover rounded-lg mt-4 opacity-75 shadow-sm">

        <div class="mt-8">
            <button class="w-full bg-red-100 hover:bg-red-200 text-red-600 font-semibold py-3 px-4 rounded-lg transition duration-150 shadow-sm">
                <i class="fas fa-trash-alt mr-2"></i> 删除待办 (编辑时显示)
            </button>
        </div>

    </main>

    <script>
        const priorityOptions = document.querySelectorAll('.priority-selector .priority-option');
        priorityOptions.forEach(option => {
            option.addEventListener('click', () => {
                priorityOptions.forEach(opt => opt.classList.remove('selected'));
                option.classList.add('selected');
            });
        });

        // Set default due date to today
        const today = new Date().toISOString().split('T')[0];
        document.getElementById('due-date').value = today;
    </script>

</body>
</html>